<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <!-- <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input> -->
         </el-col>
         <el-col :span="4">
          <el-button @click="boxAdd" type="primary">添加客户</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="ClientList.records" border stripe>
            <el-table-column prop='id' label="序号"></el-table-column>
            <el-table-column prop='logo' label="头像">
              <template slot-scope="scope">
                  <el-image style="width: 50px; height: 50px" :src="scope.row.logo"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop='rplace' label="求租地址"></el-table-column>
            <el-table-column prop='rprice' label="求租预算"></el-table-column>
            <el-table-column prop='rname' label="客户名"></el-table-column>
            <el-table-column prop='phone' label="电话号码"></el-table-column>
            <el-table-column prop='riPwd' label="密码"></el-table-column>
            <el-table-column prop='aid' label="求租区域id"></el-table-column>
            <el-table-column prop='rdesc' label="描述"></el-table-column>
            <el-table-column prop='rtime' label="注册时间"></el-table-column>
            <el-table-column prop='vocation' label="职业"></el-table-column>
            <el-table-column prop='constellation' label="星座"></el-table-column>
            <el-table-column prop='age' label="年龄"></el-table-column>
            <el-table-column prop='sex' label="性别"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button><br>
                 <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="page.pageNum" :page-sizes="[5, 10, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>

           <!-- 新增框  -->
     <el-dialog title="新增客户" :visible.sync="addbox">
      <el-form  >
        <el-form-item label="客户头像" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="求租地址" >
           <el-select v-model="addForm.rplace" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.areaName">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="求租预算" >
           <el-input v-model="addForm.rprice"></el-input>
        </el-form-item>
        <el-form-item label="客户名" >
           <el-input v-model="addForm.rname"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" >
           <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
           <el-input type="password" v-model="addForm.riPwd"></el-input>
        </el-form-item>
        <el-form-item label="求租区域" >
           <el-select v-model="addForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addForm.rdesc"></el-input>
        </el-form-item>
        <el-form-item label="职业" >
           <el-input v-model="addForm.vocation"></el-input>
        </el-form-item>
        <el-form-item label="星座" >
           <el-input v-model="addForm.constellation"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
           <el-select v-model="addForm.age" placeholder="请选择年龄">
              <el-option label="10后" value="10后"></el-option>
              <el-option label="00后" value="00后"></el-option>
              <el-option label="90后" value="90后"></el-option>
              <el-option label="80后" value="80后"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-radio v-model="addForm.sex"  label="男">男</el-radio>
          <el-radio v-model="addForm.sex"  label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addClient" type="primary">确 定</el-button>
      </div>
      </el-dialog>
    </el-card>

    <!-- 修改框  -->
     <el-dialog title="修改客户信息" :visible.sync="editbox">
      <el-form >
        <el-form-item label="客户头像" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="updhandleRemove" :http-request="updcustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 110px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="求租地址" >
           <el-select v-model="updForm.rplace" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.areaName">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="求租预算" >
           <el-input v-model="updForm.rprice"></el-input>
        </el-form-item>
        <el-form-item label="客户名" >
           <el-input v-model="updForm.rname"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" >
           <el-input v-model="updForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
           <el-input type="password" v-model="updForm.riPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" >
           <el-input type="password" v-model="Pwd"></el-input>
        </el-form-item>
        <el-form-item label="求租区域" >
           <el-select v-model="updForm.aid" placeholder="请选择地址">
              <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="描述" >
           <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="updForm.rdesc"></el-input>
        </el-form-item>
        <el-form-item label="职业" >
           <el-input v-model="updForm.vocation"></el-input>
        </el-form-item>
        <el-form-item label="星座" >
           <el-input v-model="updForm.constellation"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
           <el-select v-model="updForm.age" placeholder="请选择年龄">
              <el-option label="10后" value="10后"></el-option>
              <el-option label="00后" value="00后"></el-option>
              <el-option label="90后" value="90后"></el-option>
              <el-option label="80后" value="80后"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="性别" >
          <el-radio v-model="updForm.sex"  label="男">男</el-radio>
          <el-radio v-model="updForm.sex"  label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="update" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
          ClientList:[],
          total:0,
          page:{
            pageNum:1,
            pageSize:10
          },
          editbox: false,  //显示修改框
          addbox: false ,  //显示新增框
          addfile:null,
          addForm:{
             rplace:'',
             rprice:0,
             rname:'',
             phone:'',
             riPwd:'',
             aid:'',
             rdesc:'',
             vocation:'',
             constellation:'',
             age:'',
             sex:'',
          },
          //确认密码
          Pwd:'',
          //地址
          AreaList:[],
          updfile:null,
          updForm:{
            // id:'',
            // rplace:'',
            //  rprice:0,
            //  rname:'',
            //  phone:'',
            //  riPwd:'',
            //  aid:'',
            //  rdesc:'',
            //  rtime:'',
            //  vocation:'',
            //  constellation:'',
            //  age:'',
            //  sex:'',
          },
          previewImage:null
        }
    },created(){
        this.getClientList();
        document.title="客户列表"
    },
    methods:{
      async showDel(id){
        let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
        let ret=await this.$http.delete(`/admin/clientinfo/delete/${id}`);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message);
        this.getClientList()
      },
      async update(){
          let formData=new FormData;
          formData.append('file',this.updfile);
          formData.append('client',JSON.stringify(this.updForm));
          let ret=await this.$http.put('/admin/clientinfo/update',formData);
          if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
            this.updfile=null;
          this.$refs['mYupload'].clearFiles();
          this.editbox=false;
          this.getClientList();
      },
      async showEdit(row){
        this.editbox=true;
        this.updForm=row;
        let ret=await this.$http.get('/admin/areaInfo/selectAll');
        this.previewImage=row.logo;
        this.AreaList=ret.data;
      },
      // 获取头像
      updcustomUpload(file){this.updfile=file.file},
      // 删除头像
      updhandleRemove(file,fileList){this.updfile=null},
      // 添加
      async addClient(){
          let formData=new FormData;
          formData.append('file',this.addfile);
          formData.append('client',JSON.stringify(this.addForm));
          let ret=await this.$http.post('/admin/clientinfo/add',formData);
          if(ret.code != 200){
               return this.$message.error(ret.message);
            }
            this.$message.success(ret.message);
          this.$refs['mYupload'].clearFiles();
          this.addbox=false;
          this.getClientList();
        
      },
      async boxAdd(){
        this.addbox=true
        let ret=await this.$http.get('/admin/areaInfo/selectAll');
        this.AreaList=ret.data;
        
      },
      // 获取头像
      customUpload(file){this.addfile=file.file},
      // 删除头像
      handleRemove(file,fileList){this.addfile=null},
      // 查询
      async getClientList(){
        let ret=await this.$http.get('/admin/clientinfo/selectAll',{params: this.page});
        this.ClientList=ret.data;
        this.total=ret.data.total;
      },
      handleSizeChange(size){
        //  console.log('变化每页条数',size);
         this.page.pageSize = size 
         this.getClientList();  //刷新
      },
      handleCurrentChange(p){
        //  console.log('变化页码',p);
         this.page.pageNum = p 
         this.getClientList();  //刷新
      },
    }
}
</script>

<style>

</style>